<template>
    <div>
        <div>
            <div class="crumbs">
            <div class="container">
                 <div class="lu hnk"></div><div class="hnk jgxx">基本信息</div>
                 <div class="jgcontainer">
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-row :gutter="20" style="margin-top:20px;">
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="所属一级分类">
                                    <el-select v-model="oneId"  style="width:300px;" value-key="id" @change="gettwoclassify">
                                        <el-option v-for="(item,index) in fulist" :key="item.id" :label="item.name" :value="item"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="作物名称">
                                    <el-input class="handle-input" placeholder="" v-model="added.name"></el-input>
                                </el-form-item>
                                <el-form-item label="作物图片">
                                    <el-upload
                                        class="upload-poster"                               
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :on-change="imgPreview"
                                            :auto-upload="false">
                                            <img v-if="headImg" :src="headImg" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    支持jpg格式，不得超过1M，建议尺寸100×100(像素)
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="所属二级分类">
                                    <el-select v-model="twoId"  value-key="id" style="width:300px;" >
                                        <el-option v-for="(item,index) in erlist" :key="index" :label="item.name" :value="item"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="作物编码">
                                    <el-input class="handle-input" placeholder="" v-model="added.code"></el-input>
                                </el-form-item>
                                <el-form-item label="别名">
                                    <el-input class="handle-input" placeholder="多个别名时请用“，”隔开" v-model="added.otherName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="lu hnk"></div><div class="hnk jgxx">产出物</div>
                <div class="jgcontainer">
                    <el-table
                        :data="cropList"
                        style="width: 100%;margin-top:20px;">
                        <el-table-column  label="产出物名称">
                            <template slot-scope="scope">
                               <el-input class="handle-input" placeholder="" v-model="scope.row.name"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column  label="部位">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.position" placeholder="请选择">
                                    <el-option
                                        v-for="item in opt"
                                        :key="item.namne"
                                        :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>  
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="图片">
                            <template slot-scope="scope">
                                <!-- <div @click="handelsuccess(scope.$index)"> -->
                                    <el-upload
										class="upload-poster"                               
										action="https://jsonplaceholder.typicode.com/posts/"
										:show-file-list="false"
										:before-upload="imgPreview1"
										:http-request="(file)=>{return imgColorSuccess(file ,scope.row)}"
										>
										<img v-if="scope.row.imgs" :src="api+scope.row.imgs" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
                                <!-- </div> -->
                                
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" class="addedbear" @click="addedcropList">+添加产出物 </el-button>
                    <el-form ref="form" :model="added" label-width="120px" style="margin-top:60px;">
                        <el-form-item label="产地及分布">
                            <el-input type="textarea" v-model="added.remarks"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="lu hnk" style="margin-top:30px;"></div><div class="hnk jgxx">生育期</div>
                <div class="jgcontainer">
                    <div v-for="(item,index) in birthList" :key="index">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-row :gutter="20" style="margin-top:20px;">
                                <el-col :span="10" style="margin-left:50px;">
                                    <el-form-item label="名称">
                                        <el-input class="handle-input" placeholder="" v-model="item.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10" style="margin-left:50px;">
                                    <el-form-item label="时间周期">
                                        <el-input class="handle-input" placeholder="" type="number" v-model="item.day"></el-input>
										<span style="margin-left:10px;">天</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    
                    <el-button type="primary" class="addedbear" style="margin-bottom:30px;" @click="addedbear">+添加生育期 </el-button>
                    <div style="height:20px;"></div>
                </div>
            </div>
        </div>
		<el-form>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" v-preventReClick = "1000000" @click="classifysave">提交</el-button>
			    <el-button @click="back">返回</el-button>
			</el-form-item>
		</el-form>
             <!-- <el-button type="primary" style="margin-left:40%; margin-top:50px;" @click="classifysave">保存</el-button>
             <el-button style="margin-left:20px; margin-top:50px;" @click ="back">返回</el-button> -->
        </div>
    </div>
</template>

<script>
    import {model_findByOne,model_findByParentId,model_cropsave,crop_findById,model_crop_update,model_findByList,modecategory_root,modecategory_child,model_crop_add,model_crop_load} from "@/request/api"
    export default {
        data(){
            return{
				oneId:'',
				twoId:'',
                headImg:'',
                api:'',
                opt:[
                    {name:'根'},
                    {name:'根茎'},
                    {name:'块根'},
                    {name:'花'},
                    {name:'全草'},
                    {name:'果实'},
                    {name:'叶'},
                    {name:'鳞茎'},
                    {name:'种子'},
                    {name:'茎'},
                    {name:'藤茎'},
                    {name:'块茎'},
                    {name:'根皮'},
                    {name:'果皮'},
                    {name:'柱头'},
                    {name:'麟叶'},
                    {name:'穗'},
                    {name:'全株'},
                    {name:'树皮'},
                    {name:'根毛'},
                    {name:'孢子粉'},
                    {name:'子实体'},
                    {name:'花丝'}
                ],
                fulist:[],
                erlist:[],
				cropList:[
				    {
				        imgs:'',
				        name:'',
				        position:'',
				        img:'',
				        files:[]
				    }
				],
				birthList:[
				    {
				        name:'',
				        day:''
				    }
				],
                added:{
                    categoryId:'',
                    name:'',
                    otherName:'',
                    code:'',
                    img:'',
                    remarks:'',
                    
                },
				oneIds:'',
				twoIds:'',
				oneIde:'',
				twoIde:'',
                form:{},
                imageUrl:'',
                image:'',
                index:''
            }
        },
        mounted(){
            this.getoneclassify()
			// $initGeet
			this.id = this.$route.query.id
			if(this.id == undefined){
				
			}else{
				this.init()
			}
        },
        methods:{
			imgColorSuccess(file,row){
				row.imgs = URL.createObjectURL(file.file)
				let fileName = file.file.name
				let regex = /(.jpg|.gif|.png|.jpeg)$/;
				if (regex.test(fileName.toLowerCase())) {
					 row.files = file.file
					 row.img = file.file.name
					 // row.files = file.file
				 } else {
					 this.$message.error('请选择图片文件');
				 }
			},
			init(){
				model_crop_load(this.id).then((res)=>{
					console.log(res)
					this.cropList = res.crops
					this.added = res.modelCrop
					this.birthList = res.births
					
					this.oneId = res.parentName[0]
						
					this.twoId = res.parentName[1]
					this.oneIde = res.parentName[0]
						
					this.twoIde = res.parentName[1]
				
					// 2021-4-26
					// 解决修改基源时报错，后端  两个id 返回反了 所以这里反着拿id
					this.oneIds = res.parentIds[1]
					this.twoIds = res.parentIds[0]
					
					modecategory_child(this.oneIds).then((res)=>{
					    this.erlist = res
					})
					
					this.headImg = this.$store.state.plantImg + this.added.img
					for(var i=0;i<this.cropList.length;i++){
						this.$set(this.cropList[i],"files",[])
						this.$set(this.cropList[i],"imgs","")
						if(this.cropList[i].img != "" && this.cropList[i].img != null){
							this.cropList[i].imgs = this.$store.state.plantImg + this.cropList[i].img
						}
						
					}
					// console.log(this.added.cropList)
				})
			},
            imgPreview(file,fileList) {
                this.headImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.added.files = file.raw
                    this.added.img = file.name
					this.files1 = file.raw
                } else {
                    this.$message.error('请选择图片文件');
                }
                
            },
            handelsuccess(index){
                this.index = index
				// console.log(this.index)
            },
            imgPreview1(file,fileList) {

               
            },
            gettwoclassify(event){
				
				// console.log(this.oneId)
				
                modecategory_child(this.oneId.id).then((res)=>{
                    this.erlist = res
                })         
            },
            getoneclassify(){
			
               modecategory_root("").then((res)=>{
                   // console.log(res)
               	this.fulist = res.data
               })
            },
            addedcropList(){
                this.cropList.push({
                    name:'',
                    position:'',
                    img:'',
					imgs:'',
					files:[]
                })
            },
            classifysave(){
                // let data = this.added
                if(this.oneId == ""){
                    this.$message.error("一级分类不能为空")
                    return false
                }
				
				if(typeof(this.oneId) == "string"){
					this.oneId = {
						id:this.oneIds,
						name:this.oneIde
					}
					// this.oneId.id= this.oneIds
				}
				if(typeof(this.twoId) == "string"){
					// this.twoId.id = this.twoIds 
					console.log(typeof(this.twoId))
					this.twoId = {
						id:this.twoIds,
						name:this.twoIde
					}
				}
				
				
                let formdata = new FormData
                for(var i=0;i<this.cropList.length;i++){
                    if(this.cropList[i].files != "" && this.cropList[i].files != null){
                        formdata.append("files",this.cropList[i].files)
                    }
					var s = "crops[" + i + "].name"
					formdata.set(s,this.cropList[i].name)
					var r = "crops[" + i + "].position"
					formdata.set(r,this.cropList[i].position)
					var t = "crops[" + i + "].img" 
					formdata.set(t,this.cropList[i].img)
                }
				
				for(var k=0;k<this.birthList.length;k++){
					var s = "births[" + k + "].name"
					formdata.set(s,this.birthList[k].name)
					var r = "births[" + k + "].day"
					formdata.set(r,this.birthList[k].day)
				}
				console.log(this.twoId != "" && this.twoId != null,22222)
				if(this.twoId != "" && this.twoId != null){
					this.added.categoryId = this.twoId.id
				}else{
					this.added.categoryId = this.oneId.id
				}
              
                for(var a in this.added){
                    if(this.added[a] == null || this.added[a] == "null"){
                        this.added[a] = ""
                        formdata.append("modelCrop."+a,'')
                    }else{
                        formdata.append("modelCrop."+a,this.added[a])
                    }
                }
				

                if(this.files1 != "" && this.files1 != null){
                    formdata.append("files",this.files1)
                }
                
				
				
					model_crop_add(formdata).then((res)=>{
						this.$router.push({path:'/modelbase'})
					})
				
                
                
            },
          addedbear(){
              this.birthList.push({
                  name:'',
                  day:''
              })
          },
       
            back(){
                this.$router.go(-1)
            }
        
        }
    }
      
</script>

<style scoped>
.addedbear{
    float:right;
    margin-right:120px;
	margin-top:20px;
    /* margin-bottom:20px; */
}
.zfkhcheck_back{
        margin-left:500px;

    }
    .zfkhcheck_span{
        font-size:14px;
        margin:20px 30px;
        /* padding-top: 30px; */
    }
    .zfkhcheck_img{
        width:200px;
        height:100px;
        background:red;
    }
    .check-xx{
        font-size:14px;
        margin: 10px 20px 0px 20px;
    }
    .crumbs{
        width:95%;
        margin:0 auto;
        margin-top: 30px;
    }
    .cons{
        padding:10px;
    }
    .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
    .jgcontainer{
        font-weight: 400;
    }
    .con{
        width:40%;
        padding: 20px;
        font-size: 14px;
        margin-left: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>